<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据源加载测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .loading {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-gray-50 p-8">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-2xl font-bold mb-6">数据源加载功能测试</h1>
        
        <!-- 数据源下拉框测试 -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h2 class="text-lg font-semibold mb-4">数据源下拉框</h2>
            <div class="flex items-center space-x-4">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">选择数据源</label>
                    <div class="relative">
                        <select id="taskDataSource" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">请选择数据源</option>
                        </select>
                        <div id="datasourceLoadingIcon" class="absolute right-2 top-1/2 transform -translate-y-1/2 hidden">
                            <svg class="loading w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <button onclick="testLoadDatasources()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                        测试加载
                    </button>
                    <button onclick="clearDatasources()" class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
                        清空
                    </button>
                </div>
            </div>
        </div>

        <!-- 测试结果 -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-lg font-semibold mb-4">测试结果</h2>
            <div id="testResults" class="space-y-4">
                <div class="text-gray-500">点击"测试加载"按钮开始测试</div>
            </div>
        </div>
    </div>

    <!-- 引入必要的JavaScript文件 -->
    <script src="/static/js/utils/api-service.js"></script>
    <script src="/static/js/utils/error-handler.js"></script>
    <script src="/static/js/components/ui/notification-service.js"></script>
    <script src="/static/js/pages/ai-analysis/analysis-manager.js"></script>
    
    <script>
        // 全局变量
        let analysisManager;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，初始化测试环境...');
            
            // 确保必要的类可用
            if (typeof ApiService === 'undefined') {
                showError('ApiService 未加载');
                return;
            }
            
            if (typeof AnalysisManager === 'undefined') {
                showError('AnalysisManager 未加载');
                return;
            }

            // 创建分析管理器实例
            analysisManager = new AnalysisManager();
            
            // 显示就绪状态
            showResult('success', '测试环境初始化完成', '所有必要的JavaScript类已加载');
        });

        // 测试数据源加载
        async function testLoadDatasources() {
            try {
                showResult('info', '开始测试数据源加载...', '正在调用数据源加载方法');
                
                if (!analysisManager) {
                    throw new Error('AnalysisManager 未初始化');
                }

                // 调用数据源加载方法
                await analysisManager.loadDatasources();
                
                showResult('success', '数据源加载测试完成', '请查看下拉框中的数据源选项');
                
            } catch (error) {
                console.error('测试失败:', error);
                showResult('error', '数据源加载测试失败', error.message);
            }
        }

        // 清空数据源
        function clearDatasources() {
            const select = document.getElementById('taskDataSource');
            if (select) {
                select.innerHTML = '<option value="">请选择数据源</option>';
                select.disabled = false;
            }
            showResult('info', '已清空数据源下拉框', '');
        }

        // 显示测试结果
        function showResult(type, title, message) {
            const resultsContainer = document.getElementById('testResults');
            const timestamp = new Date().toLocaleTimeString();
            
            const resultDiv = document.createElement('div');
            resultDiv.className = `p-4 rounded border-l-4 ${
                type === 'success' ? 'bg-green-50 border-green-400' :
                type === 'error' ? 'bg-red-50 border-red-400' :
                type === 'info' ? 'bg-blue-50 border-blue-400' :
                'bg-gray-50 border-gray-400'
            }`;
            
            resultDiv.innerHTML = `
                <div class="flex items-center justify-between">
                    <div>
                        <div class="font-medium ${type === 'success' ? 'text-green-800' : type === 'error' ? 'text-red-800' : 'text-blue-800'}">
                            ${title}
                        </div>
                        <div class="text-sm ${type === 'success' ? 'text-green-600' : type === 'error' ? 'text-red-600' : 'text-blue-600'} mt-1">
                            ${message}
                        </div>
                    </div>
                    <div class="text-xs text-gray-500">
                        ${timestamp}
                    </div>
                </div>
            `;
            
            resultsContainer.insertBefore(resultDiv, resultsContainer.firstChild);
            
            // 限制显示的结果数量
            while (resultsContainer.children.length > 10) {
                resultsContainer.removeChild(resultsContainer.lastChild);
            }
        }

        // 显示错误信息
        function showError(message) {
            showResult('error', '错误', message);
        }
    </script>
</body>
</html>